<template>
	<div class="jmgk">
		<div class="roomid">
			<p>roomid: {{ roomId }}</p>
		</div>
		<div class="video-list" v-if="token">
			<ObserverVideo :token="token">
				<template v-slot:unmuted>
					<p></p>
				</template>
			</ObserverVideo>
		</div>
	</div>
</template>

<script>
import ObserverVideo from '../Monitoring/ObserverVideo.vue';
export default {
	components: {
		ObserverVideo
	},
	data() {
		return {
			roomId: '',
			token: ''
		};
	},
	mounted() {
		this.roomId = this.$route.query.roomId;
		this.token = this.$route.query.token;
		console.log(this.token);
	}
};
</script>

<style lang="less" scpoed>
.jmgk {
	width: 100%;
	margin: 0 auto;
	.observer-video {
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-flow: wrap;
		.streamvideo {
			margin: 20px;
			width: 480px;
			height: 320px;
		}
		.streamvideo video {
			width: 100%;
			height: 100%;
		}
	}
}
.roomid {
	border-bottom: 1px solid #ccc;
}
.roomid p {
	font-size: 16px;
	font-weight: 700;
	padding: 10px 0;
}
</style>
